<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>听话的小方块</title>
	<style type="text/css">
	body{
		margin: 0;
		padding: 0;
	}
		table{
			border: 2px solid black;
			position: absolute;
			top: 45px;
			left:65px;
		}
		tr{
			width:500px;
			
		}
		td{
			height: 50px;
			width: 50px;
			border: 1px solid gray;

		}
		.top{
			 width: 600px;
			 height: 40px;
			 position: absolute;
			 top: 0;
			 left:25px;
		}
		.top li{
			float: left;
			width:56px;
			height: 30px;
			text-align: center;
			text-decoration: none;
			list-style: none;
			font-size: 20px;
		}
		.left{
			position: absolute;
			top: 50px;
			left: 0px;
			width:30px;
			height: 600px;
		}
		.left li{
			width:30px;
			height:56px;
			text-align: left;
			list-style: none;
			font-size: 20px;
		}
		.current{
			background: red;
		}
		.face_left{
			border-left:-20px solid blue;
		}
	</style>
</head>
<body>
	<ul class="top">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>
	<ul class="left">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>
	<table>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="current face_left"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>

	<div>
		
	</div>
</body>
</html>